<template>
    <div class="local-channel">
      <div class="empty-state">
        <!-- 方案1：使用Element Plus的图标 -->
        <div class="empty-icon">
          <el-icon><Location /></el-icon>
        </div>
        
        <h3 class="empty-title">暂未选择地方频道</h3>
        <p class="empty-desc">请选择一个地方频道开始浏览</p>
        <el-button type="primary" class="select-button" @click="handleSelectChannel">
          选择频道
        </el-button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ElMessage } from 'element-plus'
  import { Location } from '@element-plus/icons-vue'
  
  const handleSelectChannel = () => {
    ElMessage({
      message: '选择频道功能开发中',
      type: 'info'
    })
  }
  </script>
  
  <style scoped>
  .local-channel {
    min-height: calc(100vh - 36vw);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4vw;
    background: #f5f7fa;
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8vw;
  }
  
  .empty-icon {
    position: relative;
    width: 50vw;
    height: 50vw;
    background: #f0f2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6vw;
  }
  
  .empty-icon :deep(.el-icon) {
    font-size: 15vw;
    color: #bfbfbf;
  }
  
  .student-img {
    position: absolute;
    bottom: -5vw;
    right: -5vw;
    width: 25vw;
    height: 25vw;
    object-fit: contain;
  }
  
  .empty-title {
    font-size: 4.5vw;
    color: #333;
    margin-bottom: 2vw;
    font-weight: 500;
  }
  
  .empty-desc {
    font-size: 3.5vw;
    color: #999;
    margin-bottom: 6vw;
  }
  
  .select-button {
    width: 30vw;
    height: 10vw;
    border-radius: 5vw;
    font-size: 3.8vw;
    background: #1890ff;
    border: none;
  }
  
  .select-button:hover {
    background: #40a9ff;
  }
  
  .select-button:active {
    background: #096dd9;
  }
  </style>